<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Food & Restaurant</title>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/header.css" />
    <link rel="stylesheet" href="./css/main-banner.css" />
    <link rel="stylesheet" href="./css/about-area.css" />
    <link rel="stylesheet" href="./css/specials.css" />
    <link rel="stylesheet" href="./css/exp.css" />
    <link rel="stylesheet" href="./css/menu.css" />
    <link rel="stylesheet" href="./css/mobile.css" />
    <link rel="stylesheet" href="./css/footer.css" />
    <link rel="stylesheet" href="./css/icon/iconfont.css" />
  </head>
  <body>
    <!-- Header -->
    <div class="header">
      <div class="header-info">
        <div class="common">
          <div class="left">
            <div class="triangle"></div>
            <img src="./img/food_logo.png" alt="food logo" />
          </div>
          <div class="right">
            <div class="info">
              <span class="iconfont icon-clock orange"></span>
              <span>Order Foods 24/7</span>
              <span style="display: inline-block; width: 80px"></span>
              <span class="iconfont icon-phone orange"></span>
              <span>061 9876 5432</span>
            </div>
            <div class="medias">
              <ul>
                <li><span class="iconfont orange icon-facebook-f"></span></li>
                <li><span class="iconfont orange icon-google"></span></li>
                <li><span class="iconfont orange icon-twitter"></span></li>
                <li><span class="iconfont orange icon-linkedin-in"></span></li>
                <li><span class="iconfont orange icon-pinterest"></span></li>
                <li><span class="iconfont orange icon-youtube"></span></li>
                <li><span class="iconfont orange icon-whatsapp"></span></li>
                <li><span class="iconfont orange icon-instagram"></span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="nav">
        <div class="common">
          <div class="left"></div>
          <div class="right">
            <ul>
              <li>Home</li>
              <li>Menu</li>
              <li>Pages</li>
              <li>Delivery</li>
              <li>News</li>
              <li>Features</li>
              <li>
                <span class="btn btn-white orange">Table Booking</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Main Banner -->
    <div class="main-banner">
      <div class="common">
        <h1 class="cursive">Foody love</h1>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae in
          voluptatibus sequi quia labore aspernatur soluta voluptate impedit
          minima porro sunt, voluptates nihil beatae optio natus a doloribus!
          Cumque, odio!
        </p>
        <span class="btn btn-white">Click here</span>
      </div>
    </div>

    <!-- About Area -->
    <div class="about-area">
      <div class="common">
        <div class="left">
          <div class="photo rotate"><div></div></div>
          <div class="photo float"><div></div></div>
        </div>
        <div class="right">
          <div class="about-title">
            <span class="cursive-title">About us</span>
            <span class="normal-title">WE ARE TASTY</span>
          </div>
          <div style="height: 40px"></div>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's stan <br /><br />
            dard dummy text ever since the 1500s,when an unknown printer took a
            galley of type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also the leap into electronic
            typesettingdard dummy text ever since the 1500s,when an unknown
            printer took a galley of type and scrambled it to make a type
            specimen book. It has survived not only five centuries, but also the
            leap into electronic typesetting
          </p>
          <div style="height: 40px"></div>
          <span class="btn btn-orange">Click here</span>
        </div>
      </div>
      <img class="plate" src="./img/pepper.png"></img>
    </div>

    <!-- Special Recipes -->
    <div class="specials">
      <div class="common">
        <div class="card space-right">
          <span class="cursive-title">Special Recipes</span>
          <span class="normal-title">TASTE OF PRECIOUS</span>
          <div style="height: 40px"></div>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's stan
            <br /><br />
            dard dummy text ever since the 1500s,when an unknown printer took a
            galley of type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also the leap into electronic
            typesettingdard dummy text ever since the 1500s,when an unknown
            printer took a galley of type and scrambled it to make a type
            specimen book. It has survived not only five centuries, but also the
            leap into electronic typesetting
          </p>
          <div style="height: 40px"></div>
          <span class="btn btn-orange">Click here</span>
        </div>
        <img src="./img/special_img.jpg" class="img" />
      </div>
    </div>

    <!-- Delightful Experience -->
    <div class="exp">
      <img src="./img/oranges.png" class="plate">
      <img src="./img/pasta.png" class="plate2">
      <div class="common">
        <div class="exp-title">
          <span class="cursive-title">Delightful</span>
          <span class="normal-title">EXPERIENCE</span>
        </div>
        <div class="img-wrap">
          <span class="img" style="background-image: url(./img/e1.jpg)">
            <span class="label">
              <p>
                SALAD WITH<br />
                EGG
              </p>
              <p style="font-size: 60px; font-weight: bold">$8</p>
              <span class="btn btn-orange" >
                Click here
              </span>
            </span>
          </span>
          <span class="img" style="background-image: url(./img/e2.jpg)">
            <span class="label">
              <p>
                BEEF & FRUIT<br />
                SALAD
              </p>
              <p style="font-size: 60px; font-weight: bold">$20</p>
              <span class="btn btn-orange" >
                Click here
              </span>
            </span>
          </span>
          <span class="img" style="background-image: url(./img/e3.jpg)">
            <span class="label">
              <p>
                ITALIAN SOURCE<br />
                MUSHROOM
              </p>
              <p style="font-size: 60px; font-weight: bold">$12</p>
              <span class="btn btn-orange" >
                Click here
              </span>
            </span>
          </span>
          <span class="img" style="background-image: url(./img/e4.jpg)">
            <span class="label">
              <p>
                MEET SPRING<br />
                SPRING
              </p>
              <p style="font-size: 60px; font-weight: bold">$12</p>
              <span class="btn btn-orange" >
                Click here
              </span>
            </span>
          </span>
        </div>
        <div class="img-wrap">
          <span class="img" style="background-image: url(./img/e5.jpg)">
            <span class="label">
              <p>
                HAMBURGER AND<br />
                CHICKEN
              </p>
              <p style="font-size: 60px; font-weight: bold">$22</p>
              <span class="btn btn-orange" >
                Click here
              </span>
            </span>
          </span>
          <span class="img" style="background-image: url(./img/e6.jpg)">
            <span class="label">
              <p>
                VEGETABLE<br />
                SOUP
              </p>
              <p style="font-size: 60px; font-weight: bold">$5</p>
              <span class="btn btn-orange" >
                Click here
              </span>
            </span>
          </span>
          <span class="img" style="background-image: url(./img/e7.jpg)">
            <span class="label">
              <p>
                PIE WITH<br />
                RICE
              </p>
              <p style="font-size: 60px; font-weight: bold">$17</p>
              <span class="btn btn-orange" >
                Click here
              </span>
            </span>
          </span>
          <span class="img" style="background-image: url(./img/e8.jpg)">
            <span class="label">
              <p>
                CHICKEN CHEST<br />
                MEET
              </p>
              <p style="font-size: 60px; font-weight: bold">$19</p>
              <span class="btn btn-orange" >
                Click here
              </span>
            </span>
          </span>
        </div>
      </div>
    </div>

    <!-- Menu -->
    <div class="menu">
      <img src="./img/pepper2.png" alt="" class="plate">
      <div class="common">
        <div class="menu-title">
          <span class="cursive-title">amazing</span>
          <span class="normal-title">DELICIOUS</span>
        </div>
        <div class="menu-item">
          <img class="img" src="./img/drinks.jpg" />
          <div class="card space-left">
            <span class="cursive-title">Drinks</span>
            <ul>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
            </ul>
          </div>
        </div>
        <div class="menu-item">
          <div class="card space-right">
            <span class="cursive-title">Main course</span>
            <ul>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
            </ul>
          </div>
          <img class="img" src="./img/course.jpg" />
        </div>
        <div class="menu-item">
          <img class="img" src="./img/dessert.jpg" />
          <div class="card space-left">
            <span class="cursive-title">Desserts</span>
            <ul>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
              <li>
                <img src="./img/plate.jpg" />
                <span>
                  Tuna Roast
                  Source........................................................$24.5
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- Mobile App -->
    <div class="mobile">
      <div class="left">
        <img src="./img/iphone.png" alt="iphone" />
      </div>
      <div class="right">
        <span class="cursive-title">Happy to Announce</span>
        <br />
        <p style="font-size: 90px">MOBILE APP</p>
        <p style="font-size: 30px">IS AVAILABLE IN EVERY OS PLATFORM</p>
        <div class="img-box">
          <img src="./img/android.png" alt="android" />
          <img src="./img/ios.png" alt="ios" />
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div class="footer">
      <img src="./img/pasta2.png" alt="" class="plate">
      <img src="./img/pasta.png" alt="" class="plate2">
      <div class="footer-info">
        <div class="common">
          <div class="item center">
            <span class="cursive-title">Take it easy with location</span>
            <p>
              112-Legere ancillae vix ne. <br />
              Te elit putent propriae eum, <br />
              aliquip nominati <br /><br />
              phone: 00 000 000 <br />
              Email: support@templatemela.com
            </p>
            <ul>
              <li><span class="iconfont orange icon-facebook-f"></span></li>
              <li><span class="iconfont orange icon-google"></span></li>
              <li><span class="iconfont orange icon-twitter"></span></li>
              <li><span class="iconfont orange icon-linkedin-in"></span></li>
              <li><span class="iconfont orange icon-pinterest"></span></li>
              <li><span class="iconfont orange icon-youtube"></span></li>
              <li><span class="iconfont orange icon-whatsapp"></span></li>
              <li><span class="iconfont orange icon-instagram"></span></li>
            </ul>
          </div>
          <div class="item center">
            <span class="cursive-title">Working Hours</span>
            <p>
              <b>Monday To Friday</b><br /><br />
              8:00am to 10:00pm(Breakfast) <br />
              11:00am to 10:00pm(Lunch/Diner) <br /><br />
              <b>Saturday & Sunday</b><br /><br />
              10:00am to 11:00pm(Brunch) <br />
              11:00am to 12:00pm(Lunch/Dinner)
            </p>
          </div>
          <div class="item">
            <span class="cursive-title">Feedback form</span>
            <form>
              <input type="text" placeholder="Name" />
              <input type="text" placeholder="Email" />
              <input type="text" placeholder="Phone" />
              <textarea placeholder="Message" cols="20" rows="10"></textarea>
            </form>
            <span class="btn btn-orange">Submit</span>
          </div>
        </div>
      </div>
      <div class="copyright">Copyright © 2016 PSDFreebies.com</div>
    </div>
  </body>
</html>
